import React, { Component } from 'react'
import "../assets/styles/content.css"
import TabA from './TabA'
import TabB from './TabB'
import TabC from './TabC'
import TabD from './TabD'
import TabE from './TabE'


export default class Content extends Component {
  /**
   * 修改active状态
   */
  state = {
    count: 100,
    currentTag: "TabA"
  }
  changeActiveState = (val) => {
    console.log(val);
    this.setState({
      currentTag: val
    })
  }

  changeCount = () => {
    //调用这个函数，调用这个函数，更新state的数据。执行render
    this.setState({
      count: 200
    })
  }
  /**
   * 写个函数
   * @returns 
   */
  showTabs = () => {
    const {currentTag} = this.state
    switch(currentTag){
      case "TabA": return <TabA></TabA>;
      case "TabB": return <TabB></TabB>;
      case "TabC": return <TabC></TabC>;
      case "TabD": return <TabD></TabD>;
      case "TabE": return <TabE></TabE>;
    }
  }

  render() {
    const { count, currentTag } = this.state
    return (
      <div className='content'>
        <div className='menu'>
          <ul className='oul'>
            {/* onclick = function(event){
              this.changeActiveState(event,"li")
            } */}
            <li onClick={(event) => this.changeActiveState("TabA")} className={currentTag == "TabA" ? "active" : ""}>优惠券</li>
            <li onClick={(event) => this.changeActiveState("TabB")} className={currentTag == "TabB" ? "active" : ""}>列表</li>
            <li onClick={(event) => this.changeActiveState("TabC")} className={currentTag == "TabC" ? "active" : ""}>订单</li>
            <li onClick={(event) => this.changeActiveState("TabD")} className={currentTag == "TabD" ? "active" : ""}>生命周期</li>
            <li onClick={(event) => this.changeActiveState("TabE")} className={currentTag == "TabE" ? "active" : ""}>购物车</li>
          </ul>
        </div>
        <div className='dataSource'>
          <p>{count}</p>
          <button onClick={this.changeCount}>修改</button>
          {/* {currentTag == "TabA" ? <TabA></TabA> : <TabB></TabB>} */}
          {this.showTabs()}
        </div>
      </div>
    )
  }
}
